<template>
  <!-- 附件五：保养记录及作业照片 -->
  <div class="attachment-5-wrap page">
    <div class="page-content page-index">
      <div class="row" style="padding-left:40px;">
        <form class="form-horizontal">
          <div class="form-group col-xs-12">
            <div class="text-left">
              <h3 class="h3" style="letter-spacing: 2px;">附件{{directoryOrder.attachment5}}：</h3>
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div class="text-left">
              <h3 class="h3" style="letter-spacing: 2px;">保养记录及作业照片</h3>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
    <template v-for="sysItem in formData.systemMiantainrecords">
      <div class="page-content" :key="sysItem.sysName+'_content'">
        <div class="row">
          <form class="form-horizontal">
            <div class="form-group col-xs-8">
              <label class="col-xs-1 control-label"></label>
              <label class="col-xs-11 control-label font-bold text-left cid"></label>
            </div>
            <div class="form-group col-xs-12">
              <div class="text-center">
                <h3 class="h3" style="letter-spacing: 2px;">{{sysItem.sysName.replace('系统', '')}}系统保养记录单</h3>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <div>
                <div class="pro-info">
                  <div class="col-xs-5 text-left no-padding font-bold">项目名称：{{proname}}</div>
                  <div class="col-xs-7 no-padding text-right font-bold">项目编号：{{pronum}}</div>
                  <!-- <div class="col-xs-5 no-padding">
                                        <input type="text" placeholder="请输入项目编号" class="form-control no-border no-padding font-bold" v-model="currentPronum">
                                    </div> -->
                </div>
                <table id="maintainPlanTable" cellspacing="0" cellpadding="0" border="0">
                  <!-- 类别循环 -->
                  <template v-for="(typeItem, index) in sysItem.maintainDetail">
                    <tr :key="typeItem.assetsCategory+'_title_'+index" style="background-color: #cdcdcd;">
                      <th class="text-left" colspan="2">
                        <span class="col-xs-6">{{ (index+1) + '、' + typeItem.assetsCategory }}</span>
                        <span class="col-xs-3 no-padding">设备总数：{{ typeItem.equpmentCount }}</span>
                        <span class="col-xs-3 no-padding">已保养数量：{{ typeItem.maintainedCount }}</span>
                      </th>
                    </tr>
                    <!-- 具体资产循环 -->
                    <template v-for="(assetItem, num) in typeItem.categoryDetail">
                      <tr :key="assetItem.area+'_area1_'+index+'_'+num">
                        <td width="60%">
                          <div class="confirm col-xs-12 no-padding">
                            <div class="col-xs-2 no-padding">区域/编号：</div>
                            <div class="col-xs-10 no-padding">{{ assetItem.area }}
                            </div>
                          </div>
                        </td>
                        <td width="40%" rowspan="3">
                          <div class="confirm col-xs-12 no-padding">
                            <div class="col-xs-5 no-padding">保养周期：</div>
                            <div class="col-xs-7 no-padding">{{ mapWorkPeriod(String(assetItem.workPeriod)) }}</div>
                          </div>
                        </td>
                      </tr>
                      <tr :key="assetItem.area+'_area2_'+index+'_'+num">
                        <td>
                          <div class="confirm col-xs-12 no-padding">
                            <div class="col-xs-2 no-padding">设备名称：</div>
                            <div class="col-xs-10 no-padding">{{ assetItem.equpmentName }}</div>
                          </div>
                        </td>
                      </tr>
                      <tr :key="assetItem.area+'_area3_'+index+'_'+num">
                        <td>
                          <div class="confirm col-xs-12 no-padding">
                            <div class="col-xs-2 no-padding">维保数量：</div>
                            <div class="col-xs-10 no-padding" v-if="assetItem.singleMiantainedCount">{{ assetItem.singleMiantainedCount }}</div>
                          </div>
                        </td>
                      </tr>
                      <tr :key="assetItem.area+'_maintainTitle_'+index+'_'+num">
                        <th class="text-center">保养项目</th>
                        <th class="text-center">保养完成情况</th>
                      </tr>
                      <tr v-for="(maintainItem, i) in assetItem.itemDetail" :key="assetItem.area+'_maintainContent_'+index+'_'+num+'_'+i">
                        <td class="text-left">{{maintainItem.itemName}}</td>
                        <td class="text-left">{{detlWithCompletion(maintainItem)}}</td>
                      </tr>
                    </template>
                    <tr :key="typeItem.assetsCategory+'_remark_'+index">
                      <td class="text-left" colspan="2">
                        <div class="confirm col-xs-12 no-padding">
                          <div class="col-xs-1 text-center no-padding">
                            备注：
                          </div>
                          <div class="col-xs-11 no-padding">
                            <!-- <input type="text" readonly disabled class="form-control no-border no-padding"> -->
                          </div>
                        </div>
                      </td>
                    </tr>
                  </template>
                  <tr>
                    <td class="text-center" colspan="2">
                      <p>保养作业完成后，保养人员或单位应如实填写保养完成情况，并作相应功能试验，遇有故障应及时填写《建筑消防设施故障维修记录表》。</p>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="form-group col-xs-12 valid_cow" style="margin:0;padding:0;">
              <div class="col-xs-4 no-padding text-center">
                使用方负责人或跟进人签名：
              </div>
              <div class="col-xs-3 no-padding">
                <input type="text" readonly disabled class="form-control border-bottom font-bold no-padding">
              </div>
              <div class="col-xs-2 no-padding text-center">
                保养人员签名：
              </div>
              <div class="col-xs-2 no-padding">
                <input type="text" readonly disabled class="form-control border-bottom font-bold no-padding">
              </div>
            </div>
            <div class="form-group col-xs-12 valid_cow" style="margin:0;">
              <div class="col-xs-2 no-padding text-center">
                保养日期：
              </div>
              <div class="col-xs-2 no-padding">
                <input type="text" readonly disabled class="form-control border-bottom font-bold no-padding">
              </div>
              <div class="col-xs-2 no-padding text-center">
                保养时间：
              </div>
              <div class="col-xs-2 no-padding">
                <input type="text" readonly disabled class="form-control border-bottom font-bold no-padding">
              </div>
              <div class="col-xs-2 no-padding text-center">
                ，总工时：
              </div>
              <div class="col-xs-1 no-padding">
                <input type="text" readonly disabled class="form-control border-bottom font-bold no-padding">
              </div>
              <div class="col-xs-1 no-padding">
                （时）
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="page-break" :key="sysItem.sysName+'_break'"></div>
    </template>
    <!-- 作业图片 -->
    <work-imgs :workPic="formData.maintainPicsDetail" :status="status" :proname="proname" :pronum="currentPronum" :startTime="startTime" :endTime="endTime" ref="matainWorkImgs"></work-imgs>
  </div>
</template>
<script>
import WorkImgs from './WorkImgs'

export default {
  name: 'Attachment-5',
  props: {
    initData: {
      type: Object,
    },
    status: {},
    proname: {},
    pronum: {},
    startTime: {},
    endTime: {},
    directoryOrder: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  components: {
    WorkImgs,
  },
  data() {
    return {
      // initData: {"systemMiantainrecords":[{"sysName":"消火栓系统","maintainDetail":[{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"{\"tab\":\"2\"}","type":1},{"itemName":"除锈","itemSituation":"{\"tab\":\"0\"}","type":1}],"maintainedCount":4,"maintainType":2,"equpmentName":"1-2-dq-03室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"{\"tab\":\"2\"}","type":1},{"itemName":"除锈","itemSituation":"{\"tab\":\"0\"}","type":1}],"maintainedCount":4,"maintainType":2,"equpmentName":"1-1-dq-04室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"{\"tab\":\"0\"}","type":1},{"itemName":"除锈","itemSituation":"{}","type":1}],"maintainedCount":4,"maintainType":2,"equpmentName":"1-1-dq-02室内消火栓","assetsCategory":"室内消火栓"},{"area":"编号1-1-dq-01","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"{\"tab\":\"1\"}","type":1},{"itemName":"除锈","itemSituation":"{}","type":1}],"maintainedCount":4,"maintainType":2,"equpmentName":"1-1-dq-01室内消火栓","assetsCategory":"室内消火栓"},{"area":"编号1-1-dq-01","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-1-dq-01室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-1-dq-02室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-2-dq-03室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-1-dq-04室内消火栓","assetsCategory":"室内消火栓"},{"area":"编号1-1-dq-01","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-1-dq-01室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-1-dq-02室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-2-dq-03室内消火栓","assetsCategory":"室内消火栓"},{"area":"某某某编号","workPeriod":4,"equpmentCount":4,"itemDetail":[{"itemName":"清洁","itemSituation":"","type":1},{"itemName":"除锈","itemSituation":"","type":1}],"maintainedCount":0,"maintainType":2,"equpmentName":"1-1-dq-04室内消火栓","assetsCategory":"室内消火栓"}]}],"maintainPicsDetail":[{"postWorkPicUrl":"resource/ilink/QQ截图20190511172353.png","detailId":"364","id":"98","preWorkPicUrl":"resource/ilink/室内消火栓.png","desc":"消火栓系统-室内消火栓-保养任务-年-2019-05-11"}]},
      currentPronum: this.pronum,
      formData: {
        systemMiantainrecords: [],
        maintainPicsDetail: [],
      },
    }
  },
  created() {
    let that = this
    if (that.initData) {
      that.formData.systemMiantainrecords = that.initData.systemMiantainrecords || [] // 建筑消防设施巡查记录
      that.formData.maintainPicsDetail = that.initData.maintainPicsDetail || []
    }
  },
  methods: {
    // 工作周期映射
    mapWorkPeriod(id) {
      const WORKMAP = {
        1: '月',
        2: '季度',
        3: '半年',
        4: '年',
      }

      return WORKMAP[id]
    },
    // 单点型资产维保结果映射
    maintainStandardResultMap(code) {
      const ResultMAP = {
        0: '正常',
        1: '异常',
        2: '未涉及',
      }

      return ResultMAP[code] || ''
    },
    // 处理完成情况
    detlWithCompletion(obj) {
      let that = this
      let maintainStandardResultMap = that.maintainStandardResultMap
      let type = obj.type
      let result = obj.itemSituation || {}

      if (type == 1) {
        return maintainStandardResultMap(result.tab)
      } else if (type == 2) {
        return result.des
      } else if (type == 3) {
        return result.num
      } else if (type == 4) {
        return maintainStandardResultMap(result.tab) + (result.des ? `；${result.des}` : '')
      } else if (type == 5) {
        return maintainStandardResultMap(result.tab) + (result.num ? `；${result.num}` : '')
      } else if (type == 6) {
        return (result.des || '') + (result.num ? `；${result.num}` : '')
      }
    },
    // 获取数据
    getData() {
      let that = this

      that.formData.maintainPicsDetail = that.$refs.matainWorkImgs.getPicData()
      return that.formData
    },
  },
  watch: {
    pronum(val, oldVal) {
      if (val != oldVal) {
        this.currentPronum = val
      }
    },
    currentPronum(val, oldVal) {
      if (val != oldVal) {
        this.$emit('changePronum', val)
      }
    },
  },
}
</script>